/*
 * SPDX-FileCopyrightText: 2025 Espressif Systems (Shanghai) CO LTD
 *
 * SPDX-License-Identifier: Apache-2.0
 */

#include "upload_page.h"

const char upload_page_html[] = 
    "<!DOCTYPE html>"
    "<html lang=\"en\">"
    "<head>"
    "    <meta charset=\"UTF-8\">"
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
    "    <title>Digital Photo Album - File Management</title>"
    "    <style>"
    "        body {"
    "            font-family: Arial, sans-serif;"
    "            margin: 20px;"
    "            background: #f5f5f5;"
    "        }"
    "        .container {"
    "            max-width: 1000px;"
    "            margin: 0 auto;"
    "            background: white;"
    "            padding: 20px;"
    "            border-radius: 10px;"
    "            box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
    "        }"
    "        h1 {"
    "            color: #333;"
    "            text-align: center;"
    "            margin-bottom: 30px;"
    "        }"
    "        .upload-section {"
    "            background: #e7f3ff;"
    "            padding: 20px;"
    "            border-radius: 10px;"
    "            margin-bottom: 30px;"
    "        }"
    "        .upload-section h3 {"
    "            margin-top: 0;"
    "            color: #0066cc;"
    "        }"
    "        .file-input {"
    "            width: 100%;"
    "            padding: 10px;"
    "            margin: 10px 0;"
    "            border: 2px dashed #ccc;"
    "            border-radius: 5px;"
    "            background: white;"
    "        }"
    "        .upload-btn {"
    "            background: #007bff;"
    "            color: white;"
    "            padding: 12px 30px;"
    "            border: none;"
    "            border-radius: 5px;"
    "            cursor: pointer;"
    "            font-size: 16px;"
    "        }"
    "        .upload-btn:hover {"
    "            background: #0056b3;"
    "        }"
    "        table {"
    "            width: 100%;"
    "            border-collapse: collapse;"
    "            margin: 20px 0;"
    "            font-size: 14px;"
    "            text-align: left;"
    "            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);"
    "        }"
    "        th, td {"
    "            padding: 12px;"
    "            border-bottom: 1px solid #ddd;"
    "        }"
    "        th {"
    "            background-color: #00BFFF;"
    "            color: white;"
    "        }"
    "        tr:hover {"
    "            background-color: #f1f1f1;"
    "        }"
    "        .delete-button {"
    "            background-color: #dc3545;"
    "            color: white;"
    "            border: none;"
    "            padding: 6px 12px;"
    "            border-radius: 3px;"
    "            cursor: pointer;"
    "            font-size: 12px;"
    "        }"
    "        .delete-button:hover {"
    "            background-color: #c82333;"
    "        }"
    "        a {"
    "            color: #007bff;"
    "            text-decoration: none;"
    "        }"
    "        a:hover {"
    "            text-decoration: underline;"
    "        }"
    "        .info-text {"
    "            color: #666;"
    "            font-size: 14px;"
    "            margin-bottom: 15px;"
    "        }"
    "    </style>"
    "</head>"
    "<body>"
    "    <div class=\"container\">"
    "        <h1>📷 Digital Photo Album File Management</h1>"
    "        <div class=\"upload-section\">"
    "            <h3>Upload Media Files</h3>"
    "            <p><strong>Supported Formats:</strong></p>\n"
    "            <ul>\n"
    "                <li>Images: JPG, JPEG, PNG, GIF, BMP</li>\n"
    "                <li>Videos: MP4, AVI, MOV</li>\n"
    "            </ul>\n"
    "            <p><strong>Limitations:</strong></p>\n"
    "            <ul>\n"
    "                <li>Maximum file size: 100MB</li>\n"
    "                <li>Recommended resolution: up to 1080P (1920×1080)</li>\n"
    "                <li>Files will be automatically saved to SD card</li>\n"
    "            </ul>\n"
    "            <form method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">"
    "                <input type=\"file\" name=\"file\" class=\"file-input\" accept=\"image/*,video/*\" multiple required>"
    "                <br>"
    "                <button type=\"submit\" class=\"upload-btn\">Upload Files</button>"
    "            </form>"
    "        </div>"
    "        <table>"
    "            <thead>"
    "                <tr>"
    "                    <th style=\"width: 40%\">Filename</th>"
    "                    <th style=\"width: 15%\">Type</th>"
    "                    <th style=\"width: 15%\">Size</th>"
    "                    <th style=\"width: 30%\">Actions</th>"
    "                </tr>"
    "            </thead>"
    "            <tbody>";

const char upload_page_footer[] = 
    "            </tbody>"
    "        </table>"
    "        <p class=\"info-text\">Note: After uploading, new files will be automatically added to the digital photo album display.</p>"
    "    </div>"
    "</body>"
    "</html>"; 